<template>
  <div class="container">
    <!-- 左侧导航栏 -->
    <el-tabs  
      tab-position="left"
      v-model="activate_name"
      @tab-click="change_tag"
    >
    <!-- 显示每个分类的名字 -->
      <el-tab-pane
        :label="tag.name"
        :name="tag.name"
        v-for="tag in tag_list"
        :key="tag.id"
      >
        <div class="main_item">
          <div class="item_box" v-for="item in image_list" :key="item.id">
            <router-link
              :to="{ name: 'image_detail', params: { id: item.id } }"
            >
              <img class="item_img" :src="item.url" alt="" />
            </router-link>
            <div class="auther_name">
              © {{ item.user_id.username }}
              <i class="el-icon-chat-round message">0</i>
              <i class="el-icon-star-off message">0</i>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import request from "../request";
export default {
  name: "photos",
  data() {
    return {
      activate_name: "",
      image_list: "",
      tag_list: [],
    };
  },
  methods: {
    change_tag(tab) {
      // 根据name去请求分类
      this.get_image(this.activate_name);
    },
    get_userinfo() {
      this.userinfo = JSON.parse(sessionStorage.getItem("userinfo"));
    },
    get_tags() {
      if (this.userinfo) {
        request({
          url: "/works/get-tags/",
          params: {
            user_id: this.userinfo.id,
          },
        })
          .then((res) => {
            var newArr = [];
            var arrName = [];
            for (var item of res.data) {
              if (arrName.indexOf(item["name"]) == -1) {
                arrName.push(item["name"]);
                newArr.push(item);
              }
            }
            this.tag_list = newArr;
            this.activate_name = this.tag_list[0].name;
            this.get_image(this.activate_name);
          })
          .catch((err) => {
            this.$message.error("请求失败/works/get-tags/");
          });
      } else {
        this.$message.error("请先登录");
        this.$router.push({
          name: "login",
        });
      }
    },
    get_image(name) {
      request({
        url: "/works/get-works-by-tag-name/",
        params: {
          name: name,
        },
      }).then((res) => {
        this.image_list = [];
        this.image_list = res.data;
      });
    },
  },
  created() {
    this.get_userinfo();
    this.get_tags();
  },
};
</script>

<style>
.main_item {
  width: 100%;
  display: flex;
  margin: auto;
  flex-wrap: wrap;
}

.item_box {
  padding: 0 10px;
  width: 30%;
  margin: auto;
  text-align: center;
}

.item_img {
  max-width: 330px;
  max-height: 240px;
}

.auther_name {
  padding: 10px 0px 80px 0px;
  font-size: 13px;
  color: #555;
}

.message {
  color: #ccc;
  margin-left: 5px;
}

.el-tabs__item.is-active {
  color: #ffffff !important;
}

.el-tabs__item:hover {
  color: #ffffff !important ;
  cursor: pointer;
}

.el-tabs__active-bar {
  background-color: black !important;
}
</style>
